<template>
    <div id="manage">
        <div class="manage_top">
            <div class="form">
                <div style="margin: 15px 20px 0 20px">
                    <zy-select v-if="formConfig" :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm" :actions="actions"></zy-select>
                </div>
                <div style="height: 40px; display: flex; margin: 10px 20px 0 20px">
                    <div class="table_title">{{ table_title }}管理</div>
                    <div class="btns">
                        <el-button v-for="item in actions" :key="item.label" :icon="item.icon" @click="item.click()">{{ item.label }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="manage_bottom">
            <div class="table">
                <div class="table_mask"></div>
                <zy-table
                    :loading="loading"
                    :tableData="tableData"
                    :tableColumn="tableColumn"
                    :pageSize="pagination.pageSize"
                    :total="pagination.total"
                    @changePage="changePage"
                    @changeID="changeID"
                    :currentPage="pagination.page"
                ></zy-table>
            </div>
        </div>
        <zy-form ref="zyform" :dialog="dialog" @add="add" @set="edit" />
        <zy-form ref="config" :dialog="dialog1" @add="setConfig" />
        <el-dialog title="导入数据" :visible.sync="dialogTableVisible">
            <el-upload ref="upload" :action="`/api/${url}/upload`" :file-list="fileList" :auto-upload="false" accept=".xlsx" :on-success="handSuccess" :on-change="handleChange" :on-progress="handError">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
            </el-upload>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import SearchManage from '@/components/basic/SearchManage.vue'
import Vue from 'vue'
import { formConfig, column, config, config1 } from './formConfig.js'
import { requestApi } from '@/requset/api'
import { deepClone } from '@/plugins/clone'
export default {
    extends: SearchManage,
    data() {
        return {
            table_title: '新算法配置',
            isShow: true,
            troubleList: [],
            url: 'algorithm_config',
            formConfig: null,
            tableColumn: null,
            tableData: [],
            baseForm: { is_enable: 1 },
            queryForm: {
                scope_id: null,
                scope_id_list: [],
                page: 1,
                size: 20,
            },
            queryFormC: {
                scope_id: null,
                scope_id_list: [],
                page: 1,
                size: 20,
            },
            actions: [
                {
                    label: '批量删除',
                    icon: 'el-icon-delete',
                    click: () => {
                        this.deletes()
                    },
                    if: () => this.operate,
                },
                {
                    label: '添加',
                    icon: 'el-icon-folder-add',
                    click: () => {
                        this.handleAdd()
                    },
                    if: () => this.operate,
                },
            ],
            dialog1: {
                labelWidth: '120px',
                config: [],
                form: {
                    address: [],
                    sensor_id: [],
                },
                title: '算法配置',
            },
            configData: {},
            configs: {},
        }
    },
    methods: {
        handleCheck(val) {
            let { id, is_enable } = val
            requestApi('post', '/algorithm_config/edit', { id, is_enable: is_enable === 1 ? 0 : 1 }).then((res) => {
                if (res.data.code == 0) {
                    this.$message.success('设置成功')
                    this.searchBtn()
                }
            })
        },
        setConfig() {
            requestApi('post', this.url + '/edit', Object.assign(this.configData, { config: JSON.stringify(deepClone(this.configs)) })).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功',
                    })
                    this.searchBtn()
                    this.$refs.config.closeDialog()
                }
            })
        },
        add(data) {
            requestApi('post', this.url + '/add1', this.to(deepClone(data), true)).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.searchBtn()
                    this.$refs.zyform.closeDialog()
                }
            })
        },
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'sensorType', 'algorithmData']),
        tags() {
            return [{ title: '总数', num: this.pagination.total }]
        },
    },

    created() {
        this.formConfig = formConfig
        this.dialog.config = config
        this.dialog.config[0].options = this.backstageData
        this.dialog.config[0].onChange = (config, form) => {
            Vue.set(form, 'sensor_id', [])
            if (form.address.length) {
                requestApi('post', `sensor/getlist2`, {
                    scope_id: form.address[form.address.length - 1],
                }).then((res) => {
                    if (res.data.code == 0) {
                        this.dialog.config[1].options = res.data.data.map((item) => {
                            return {
                                label: item.device_name + ' | ' + item.sensor_name,
                                value: item.device_id + ',' + item.id,
                            }
                        })
                    }
                })
            }
        }
        this.dialog.labelWidth = '100px'
        requestApi('post', `algorithm_group/getlist`, { page: 1, size: 9999 }).then((res) => {
            if (res.data.code == 0) {
                this.dialog.config[2].options = res.data.data.map((item) => {
                    return {
                        label: item.name,
                        value: item.id,
                    }
                })
                this.dialog.config[2].onChange = (config, form) => {
                    if (form.algorithm_group_id) {
                        form.config = res.data.data.find((item) => item.id === form.algorithm_group_id).config
                    }
                }
                this.formConfig[2].options = res.data.data.map((item) => {
                    return {
                        label: item.name,
                        value: item.id,
                    }
                })
            }
        })
        column[column.length - 1].buttons = [
            {
                text: '算法配置',
                click: (val) => {
                    this.configData = val
                    this.configs = JSON.parse(val.config)
                    let dir = {
                        acc_rms: '加速度配置',
                        vel_rms: '速度配置',
                        tem: '温度配置',
                        acc_kur: '加速度峭度配置',
                        acc_wave: '加速度波形配置',
                    }

                    this.dialog1.config = deepClone(config1)
                    this.dialog1.group = ['模型配置']
                    this.dialog1.config[0].options = this.configs.map((item) => {
                        return {
                            label: item.m_desc,
                            value: item.m_m_code,
                        }
                    })
                    this.dialog1.form.model = this.configs[0].m_m_code
                    this.dialog1.config[0].onChange = (config, form) => {
                        this.dialog1.config = this.dialog1.config.slice(0, 8)
                        this.dialog1.group = ['模型配置']
                        let data = this.configs.find((item) => item.m_m_code === form.model)
                        for (let key in data) {
                            if (key === 'm_config') {
                                for (let k in data['m_config']) {
                                    this.dialog1.group.push(dir[k])
                                    this.dialog1.config.push({
                                        name: k,
                                        type: 'form',
                                        label: '参数配置',
                                        required: true,
                                        group: dir[k],
                                        baseForm: {},
                                        config: [
                                            {
                                                name: 'key',
                                                type: 'input',
                                                label: '参数类型',
                                            },
                                            {
                                                name: 'value',
                                                type: 'input',
                                                label: '参数值',
                                            },
                                            {
                                                name: 'desc',
                                                type: 'input',
                                                label: '参数描述',
                                            },
                                        ],
                                    })
                                    Vue.set(this.dialog1.form, k, data['m_config'][k])
                                }
                            } else {
                                Vue.set(this.dialog1.form, key, data[key])
                            }
                        }
                    }
                    this.$refs.config.openDialog('add')
                },
                if: () => this.operate,
                icon: 'el-icon-edit-outline',
            },
            {
                text: '停用',
                click: (val) => this.handleCheck(val),
                if: (val) => val.is_enable === 1 && this.operate,
                icon: 'el-icon-switch-button',
            },
            {
                text: '启用',
                click: (val) => this.handleCheck(val),
                if: (val) => val.is_enable === 0 && this.operate,
                icon: 'el-icon-video-play',
            },
            {
                text: '删除',
                click: (val) => this.delete(val),
                if: () => this.operate,
                icon: 'el-icon-delete',
            },
        ]
        this.tableColumn = column
        this.searchBtn()
    },
}
</script>
<style>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}
</style>
